<template>
  <div class="selectWrap">
    <div class="select-wrapper">
      <div
        class="select flex"
        @click="triggerOption"
      >
        <div class="select-content">{{selectContent.text}}</div>
        <div class="triangle-wrapper">
          <div id="triangle-down" :class="{ transformTriangle: optionFlag }"></div>
        </div>
      </div>
      <transition name="fade">
        <div
          class="option-wrapper"
          v-show="optionFlag"
          ref="options"
        >
          <div class="options">
            <div
              class="option-item"
              v-for="(item,index) in optionArr"
              :key="index"
              @mouseout="out($event)"
              @mouseover="over($event)"
              @click="choose(item)"
            >{{item.text}}</div>
          </div>
          <div class="optionArrow"></div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    selectWidth: {
      type: Number,
      default: 100
    },
    optionArr: {
      type: Array,
      default: function() {
        return [];
      }
    },
    selectContent: {
      type: Object,
      default: function() {
        return { value: 0, text: "请选择" };
      }
    }
  },
  mounted() {
    document.querySelector(".selectWrap").style.width = this.selectWidth / 100 + "rem";
    for (var item of this.optionArrList) {
      item.style.width = (this.selectWidth - 2) / 100 + "rem";
    }
  },
  updated() {
    if(this.$refs.options) {
      for (var item of this.optionArrList) {
        item.style.width = (this.selectWidth - 2) / 100 + "rem";
      }
    }
  },
  data() {
    return {
      optionFlag: false, // 是否展开了options
    }
  },
  computed: {
    optionWrapper() {
      return document.querySelector(".option-wrapper");
    },
    selectCon() {
      return document.querySelector(".select-content");
    },
    optionArrList() {
      return document.getElementsByClassName("option-item");
    }
  },
  methods: {
    // 鼠标悬停的元素之上或则移动进来
    over(event) {
      for (var item of this.optionArrList) {
        item.classList.remove("hover");
      }
      event.currentTarget.classList.add("hover");
    },
    // 鼠标悬停在元素之外或移动出去
    out(event) {
      event.currentTarget.classList.remove("hover");
    },
    triggerOption() {
      if (this.optionFlag == true) {
        this.optionFlag = false
      } else {
        this.optionFlag = true
      }
      console.log(this.optionArrList)
      for (var item of this.optionArrList) {
        if (item.innerHTML == this.selectContent.text) {
          console.log(item)
          item.classList.add("actived");
          item.classList.add("hover");
        } else {
          item.classList.remove("actived");
          item.classList.remove("hover");
        }
      }
    },
    choose(item) {
      this.selectContent.text = item.text;
      this.optionFlag = false
      this.$emit("changeSelect", this.selectContent.text);
    }
  }
};
</script>

<style lang="less" scoped>
.select-wrapper{
  position: relative;
}
.select {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 0.08rem;
  border: 0.02rem solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 0.8rem;
  line-height: 0.8rem;
  outline: none;
  padding: 0 0.3rem;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  cursor: pointer;
  position: relative;

  .select-content {
    text-align: left;
  }

  .triangle-wrapper {
    position: absolute;
    right: .1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 20px;
    background-color: #fff;
    cursor: default;

    #triangle-down {
      position: absolute;
      right: 5px;
      top: 30%;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #000;
      transition: transform .3s;
    }
    .transformTriangle {
      transform: rotate(180deg);
      
    }
  }
}



.option-wrapper {
  list-style: none;
  padding: 6px 0;
  margin: 0;
  box-sizing: border-box;
  position: absolute;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 8px 0;
  position: absolute;
  top: .85rem;

  .optionArrow {
    top: -10px;
    left: .35rem;
    position: absolute;
    border-color: transparent;
    border-style: solid;
  }
  .optionArrow::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-width: 0px 8px 10px;
    border-style: none solid solid;
    border-color: transparent transparent white;
  }
  .options{
    display: block;
    .option-item {
      display: block;
      width: 100%;
      font-size: 14px;
      padding: 0 20px;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #606266;
      height: 34px;
      line-height: 34px;
      box-sizing: border-box;
      cursor: pointer;
      text-align: left;
    }
    .actived {
      color: #409eff !important;
    }
    .hover {
      background-color: #f5f7fa;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: transform .3s;
  transform: translate3d(0,0,0);
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */{
  transform: translate3d(0,0,100%);
}


</style>